<template>
  <div class="searchWrap">
    <van-search
      v-model="searchValue"
      show-action
      autofocus
      placeholder="请输入搜索关键词"
      @input="onSearch"
      @cancel="onCancel"
    />
    <van-tabs v-model="type" @click="changeTags">
      <van-tab title="帖子">
        <!-- <creat-post></creat-post> -->
        <div class="content" v-if="form">
          <div
            class="postWrap"
            @click="toPostDetail(item)"
            v-for="(item, index) in form"
            :key="index"
          >
            <div class="postHeader">
              <div class="postHeader_img">
                <img
                  v-if="item.user & item.user[0].headPic.content"
                  :src="item.user[0].headPic.content"
                  alt=""
                  ref="headPic"
                />
                <img
                  v-else
                  src="static/images/headPic.png"
                  alt=""
                  ref="headPic"
                />
              </div>
              <span v-if="item.user">{{ item.user[0].username }}</span>
            </div>
            <div class="postWord">
              <span class="postWord_span">{{ item.title }}</span>
              <p class="postWord_p">
                {{ item.content }}
              </p>
            </div>
            <div class="postImg" v-if="item.pictures">
              <img
                :src="pic.content"
                alt=""
                v-for="(pic, index) in item.pictures"
                :key="index"
              />
            </div>
            <div class="postFooter">
              <div class="read">
                <van-icon class="van-icon" name="browsing-history-o" />
                <span>{{ item.readNum }}</span>
              </div>
              <div class="comment">
                <van-icon name="comment-o" />
                <span>{{ item.commentList.length }}</span>
              </div>
              <div class="like" @click.stop="lickChange(item)">
                <van-icon
                  v-if="user & (item.likeList.indexOf(user[0]._id) === -1)"
                  name="like-o"
                />
                <van-icon v-else name="like" />
                <span>{{ item.likeList.length }}</span>
              </div>
            </div>
          </div>
          <van-empty :description="tipsMsg" v-if="(form.length === 0)" />
        </div>
      </van-tab>
      <van-tab title="用户">
        <div class="content" v-if="form1.length>0">
          <div
          class="userWrap"
            @click="toUserDetail1(item)"
            v-for="(item, index) in form1"
            :key="index"
          >
            <div class="userImg">
              <img v-if="item.headPic.content" :src="item.headPic.content" alt="" />
              <img
              v-else
              src="static/images/headPic.png"
              alt=""
            />
            </div>
            <div class="userName22">
              <span>{{ item.username }}</span>
              <br>
              <span style="font-weight: 100">{{item.college}}</span>
            </div>
          </div>
        </div>
        <van-empty :description="tipsMsg" v-if="(form1.length === 0)" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getSearch, setLikeList } from '@/views/api/api.js'
import searchPost from './components/searchPost'
import searchUser from './components/searchUser'
export default {
  components: {
    searchPost,
    searchUser
  },
  data () {
    return {
      type: 0, // 0为帖子，1为用户
      searchValue: '',
      form: [],
      form1: [],
      user: '',
      tipsMsg: ''
    }
  },
  computed: {},
  created () {
    this.init()
  },
  methods: {
    init () {
      // 获取用户信息
      this.user = JSON.parse(sessionStorage.getItem('user'))
    },
    onSearch () {
      if (this.searchValue) {
        // 点击搜索
        let params = {
          type: this.type,
          searchValue: this.searchValue
        }
        getSearch(params).then(res => {
          if (res.data.code) {
            this.form = []
            this.form1 = []
            this.tipsMsg = res.data.msg
          } else {
            if (this.type === 0) {
              this.form = res.data.Info
            } else {
              this.form1 = res.data.Info
            }
          }
        })
      } else {
        this.form1 = []
        this.form = []
        this.tipsMsg = ''
      }
    },
    changeTags () {
      if (this.searchValue) {
        this.onSearch()
      }
    },
    onCancel () {
      this.$router.replace({ path: '/index' })
    },
    lickChange (item) {
      // 判断当前用户是否点赞过，即是否在likeList中 在则从likeList删除，不在则push进去
      if (item.likeList.indexOf(this.user[0]._id) === -1) {
        this.isAdd = true
      } else {
        this.isAdd = false
      }
      // 将likeList写入数据库
      let params = {
        isAdd: this.isAdd,
        userID: this.user[0]._id,
        id: item._id
      }
      setLikeList(params).then(res => {
        if (res.data.code) {
          // Toast.fail(res.data.msg)
        } else {
          item.likeList = res.data.Info[0].likeList
        }
      })
    },
    toPostDetail (item) {
      this.$router.push({
        name: 'postDetail',
        query: { postID: item._id }
      })
    },
    // 评论用户详情页
    toUserDetail1 (item) {
      this.$router.push({
        name: 'UserDetail',
        query: { id: item._id }
      })
    }
  }
}
</script>
<style></style>
<style scoped>
.header {
  display: flex;
}
.searchInput {
  width: 80%;
}
.campusCircleWrap {
  display: flex;
  justify-content: flex-start;
}
.van-sidebar {
  overflow-y: auto;
}
.van-sidebar::-webkit-scrollbar {
  width: 0;
}
.content {
  background-color: #f7f8fa;
  overflow-y: auto;
  width: 100%;
  height: calc(100vh - 98px);
}
.postHeader {
  text-align: left;
  display: flex;
  align-items: center;
}
.postHeader_img {
  width: 0.25rem;
  height: 0.25rem;
  margin-right: 0.08rem;
}
.postHeader_img > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.postHeader > span {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.postWrap {
  padding: 5px 16px;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
}
.postImg {
  display: flex;
  flex-wrap: wrap;
}
.postImg .van-image {
  margin: 0.05rem;
}
.postImg img {
  margin: 0.05rem;
}
.postImg img {
  width: calc((100% - 40px) / 3);
}
.postWord {
  text-align: left;
  margin: 5px 0;
}
.postFooter {
  text-align: left;
  color: #9d9d9d;
  display: flex;
  justify-content: space-around;
}
.postFooter .van-icon {
  vertical-align: middle;
}
.postFooter > div {
  display: flex;
  align-items: center;
}
.postFooter > div > span {
  margin-left: 3px;
}
.postWord_span {
  font-weight: 700;
  font-size: 0.12rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.postWord_p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.postFooter .van-icon-like::before {
  color: #ffb6c1;
}
.userImg{
  width: 12%;
}
.userImg > img {
  width: 100%;
  border-radius: 50%;
}
.userWrap{
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid 	#F5F5F5;
  /* margin: 10px 0; */
}
.userName22{
  margin-left: 10px;
  font-weight: 700;
  text-align: left;
}
</style>
